<template>
  <footer class="box-wrapper box-pagination">
    <el-pagination
      ref="elPagination"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
      :hide-on-single-page="hideOnSinglePage"
      v-bind="$attrs"
      v-on="$listeners"
      @prev-click="handlePreClick"
      @next-click="handleNextClick"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </footer>
</template>

<script>
export default {
  name: 'MyPagination',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: { type: Number, default: 0 },
    pageNum: { type: Number, default: 1 },
    pageSize: { type: Number, default: 15 },
    total: { type: Number, default: 1 },
    // page: { type: Object, default: () => { return { pageNum: 1, pageSize: 15, total: 0 } } },
    pageSizes: { type: Array, default: () => [15, 30, 50, 100] },
    layout: { type: String, default: 'total, sizes, prev, pager, next, jumper' },
    hideOnSinglePage: { type: Boolean, default: true }
  },
  data() {
    return {
      // currentPage: 1
    }
  },
  computed: {
    currentPage() {
      return this.value ? this.value : this.pageNum
    }
  },
  methods: {
    handlePreClick() {
      if (this.currentPage < 1) return
      this.handleCurrentChange(this.currentPage - 1)
    },
    handleNextClick() {
      if (this.currentPage > this.total) return
      this.handleCurrentChange(this.currentPage + 1)
    },
    handleSizeChange(val) {
      this.$emit('sizeChange', { pageNum: this.currentPage, pageSize: val, total: this.total })
    },
    handleCurrentChange(val) {
      if (val < 1 || val > this.total) return
      this.$emit('currentChange', { pageNum: val, pageSize: this.pageSize, total: this.total })
    }
  }
}
</script>

<style>

</style>
